<template>
  <div class="about">
    <s-header :title="'我的'"></s-header>
    <div class="user-info">
      <div class="info">
        <img src="//s.yezgea02.com/1598681231819/boss.png" alt="" />
        <div class="user-desc">
          <span>nickName: {{ userData.userInfo.nick_name }}</span>
          <span class="id">id: {{ userData.userInfo.username }}</span>
          <span class="name">个性签名: {{ userData.userInfo.sign }}</span>
        </div>
      </div>
    </div>
    <div>
      <van-grid :column-num="2">
        <van-grid-item
          @click="goTo('order')"
          icon="orders-o"
          text="我的订单"
        ></van-grid-item>
        <van-grid-item
          icon="user-o"
          text="账号管理"
          @click="goTo('setting')"
        ></van-grid-item>
        <van-grid-item
          icon="location-o"
          text="地址管理"
          @click="goTo('address?from=mine')"
        ></van-grid-item>
        <van-grid-item icon="friends-o" text="关于我们"></van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script lang="ts">
// import { login } from "../service/order";
import { getCurrentUserData } from "../service/setting";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import sHeader from "../components/SimpleHeader.vue";

interface userData {
  userInfo: {
    username: string;
    nick_name: string;
    sign: string;
  };
}

export default defineComponent({
  name: "user",
  components: { sHeader },
  setup() {
    const router = useRouter();
    // 路由回退
    const userInfo = {
      username: "15090313732",
      password: "123456",
    };
    const userData: userData = reactive({
      userInfo: {
        username: "登录后查看",
        nick_name: "登录后查看",
        sign: "登录后查看",
      },
    });
    const goTo = (item: string) => {
      router.push(`/${item}`);
    };
    const getUserData = async () => {
      const Data:any = await getCurrentUserData();
      console.log(Data);
      if (Data.code === 10086 || Data.code === 2003) return;
      userData.userInfo = {
        username: Data.data.username || "登录后查看",
        ["nick_name"]: Data.data.nick_name || "登录后查看",
        sign: Data.data.sign || "登录后查看",
      };
      console.log(userData.userInfo);
    };
    onMounted(() => {
      // async function orders() {
      //   const der = await login(userInfo);
      //   console.log(der);
      // }
      getUserData();
      // orders();
    });
    return { goTo, userData };
  },
});
</script>

<style lang="less" scoped>
@import "../common/style/mixin.less";
.about {
  .user-info {
    padding-top: 44px;
    border-radius: 6px;
    position: relative;
    .info {
      position: relative;
      display: flex;
      flex-direction: column;
      .wh(100%,100%);
      padding: 25px 20px;
      align-items: center;
      justify-content: center;
      background-color: #00bcd4;
      .boxSizing();
      img {
        .wh(60px,60px);
        border-radius: 50px;
        border: 1px solid #e9e9e9;
        object-fit: cover;
      }
      .user-desc {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        line-height: 20px;
        font-size: 14px;
        align-items: center;
        span {
          font-size: 14px;
          font-weight: 500;
          margin: 2px 0;
          color: #fff;
        }
        .id {
          border-radius: 20px;
          padding: 2px 5px;
        }
      }
      .account-setting {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 13px;
        color: #fff;
        .van-icon-setting-o {
          font-size: 16px;
          vertical-align: -3px;
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
